<template>
  <view class="tabbar">
    <view
        v-for="(item, index) in tabbarList"
        :key="index"
        class="tabbar-item"
        @tap="switchTab(item.pagePath, index)"
    >
      <image
          class="tabbar-icon"
          :src="selected === index ? item.selectedIconPath : item.iconPath"
      />
      <text :class="{ active: selected === index }">{{ item.text }}</text>
    </view>
  </view>
</template>
<script setup>
import { ref, onMounted } from 'vue';

const tabbarList = [
  {
    pagePath: '/pages/index',
    iconPath: '/static/images/tabbar/home.png',
    selectedIconPath: '/static/images/tabbar/home_.png',
    text: '首页'
  },
  {
    pagePath: '/pages/mine',
    iconPath: '/static/images/tabbar/mine.png',
    selectedIconPath: '/static/images/tabbar/mine_.png',
    text: '我的'
  }
];

const selected = ref(0);

const switchTab = (url, index) => {
  selected.value = index;
  uni.switchTab({ url });
};

onMounted(() => {
  const pages = getCurrentPages();
  const route = pages[pages.length - 1].route;
  const currentPath = '/' + route;
  selected.value = tabbarList.findIndex(item => item.pagePath === currentPath);
});
</script>
<style scoped>
.tabbar {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  height: 65px; /* 自定义高度 */
  background-color: #fff;
  border-top: 1px solid #ddd;
  display: flex;
  justify-content: space-around;
}

.tabbar-item {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tabbar-icon {
  width: 26px;
  height: 26px;
  margin: 0 auto 4px;
}

.active {
  color: #007aff;
  font-weight: bold;
}
</style>
